<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-family: Helvetica, Arial, sans-serif;
            font-size: 12px;
        }
    </style>
</head>
<body>
    Such interactive text size buttons can change the font-size property of the body element, and the adjustments are picked up by other elements on the page thanks to the relative units.
    <a href="#" id="size-12">12</a>
    <a href="#" id="size-16">16</a>
    <a href="#" id="size-20">20</a>
    <script>
        function init() {
            var name = 'Mozilla'; // name is a local variable created by init
            function displayName() { // displayName() is the inner function, a closure
                // alert(name); // use variable declared in the parent function
            }
            displayName();
        }
        init();

        function makeSizer(size) {
            return function() {
                document.body.style.fontSize = size + 'px';
            };
        }
        var size12 = makeSizer(12);
        var size16 = makeSizer(16);
        var size20 = makeSizer(20);
        document.getElementById('size-12').onclick = size12;
        document.getElementById('size-16').onclick = size16;
        document.getElementById('size-20').onclick = size20;

        function makeSizer2(size) {
            document.body.style.fontSize = size + 'px';
        }
        makeSizer2(30);
    </script>
</body>
</html>